import React, {Component} from 'react';
import Info from './lib/Info';

require('./css/frame.css');
const  flag= ['经典视图', '全屏视图','带额外显示视图'];
export default class P10 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {

      num:0,
    };
  }

  onClick() {
    let {num} = this.state;
    num=num+1;
    this.setState({
      num
    });
  }

  render() {
    const {num} = this.state;
    return (
      <div id="page">
        <div className="content" id="box10">
          <h4 className="title">视图模式切换</h4>
          <div className='infodiv'>打开点火开关，请点按方向盘上的OK键，可在主动信息显示屏（AID）的不同信息视图中进行切换。</div>

          <img src={require('./img/10_4.jpg')} id='box10btn'  onClick={this.onClick.bind(this)}/>

          <div id='ldiv10'>
            {
              flag.map( (item,i)=>{
                if(i<num) {
                  return (
                      <li key={i}><span>{item}</span><img src={require('./img/10_' + i + '.jpg')}/></li>
                  )
                }
              })
            }
          </div>

          <Info style={{left: '93', top: '560'}}  data='匹配MIB9.2+AID的车辆可在仪表和MIB上同时显示导航地图'/>

        </div>
      </div>
    );
  }
}


